<template>
  <div class="screen-container" :style="containerStyle">
    <!-- 头部区域 -->
    <header class="screen-header">
      <div class="theme-img">
        <!-- 主题图片logo -->
        <img
          v-show="theme === 'chalk'"
          src="~@/assets/img/header_border_dark.png"
          alt=""
        />
        <img
          v-show="theme !== 'chalk'"
          src="~@/assets/img/header_border_light.png"
          alt=""
        />
      </div>
      <span class="logo"><img :src="logoSrc" alt="" /></span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <!-- 主题图片皮肤 -->
        <img :src="themeSrc" alt="" @click="handleChangeTheme" />
        <!-- 时间 -->
        <div class="datetime">{{ systemDateTime }}</div>
      </div>
    </header>

    <!-- 图表区域 -->
    <div class="screen-body">
      <!-- 左部分图表 -->
      <section class="screen-left">
        <div id="left-top" :class="{ fullscreen: fullScreenStatus.trend }">
          <Trend ref="trend"></Trend>
          <div class="resize">
            <span
              @click="changeSize('trend')"
              :class="[
                'iconfont',
                fullScreenStatus.trend
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div id="left-bottom" :class="{ fullscreen: fullScreenStatus.seller }">
          <Seller ref="seller"></Seller>
          <div class="resize">
            <span
              @click="changeSize('seller')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
      <!-- 中间部分图表 -->
      <section class="screen-center">
        <div id="center-top" :class="{ fullscreen: fullScreenStatus.map }">
          <Map ref="map"></Map>
          <div class="resize">
            <span
              @click="changeSize('map')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div id="center-bottom" :class="{ fullscreen: fullScreenStatus.rank }">
          <Rank ref="rank"></Rank>
          <div class="resize">
            <span
              @click="changeSize('rank')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
      <!-- 右边部分图表 -->
      <section class="screen-right">
        <div id="right-top" :class="{ fullscreen: fullScreenStatus.hot }">
          <Hot ref="hot"></Hot>
          <div class="resize">
            <span
              @click="changeSize('hot')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
        <div id="right-bottom" :class="{ fullscreen: fullScreenStatus.stock }">
          <Stock ref="stock"></Stock>
          <div class="resize">
            <span
              @click="changeSize('stock')"
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt',
              ]"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
/**
 * 引入组件
 */

import Trend from "@/components/Trend.vue";
import Seller from "@/components/Seller.vue";
import Map from "@/components/Map.vue";
import Rank from "@/components/Rank.vue";
import Hot from "@/components/Hot.vue";
import Stock from "@/components/Stock.vue";

import { mapState } from "vuex";
import { getThemeValue } from "@/utils/theme_utils";

export default {
  components: {
    Trend,
    Seller,
    Map,
    Rank,
    Hot,
    Stock,
  },
  data() {
    return {
      // theme: "chalk",
      // 各组件是否全屏状态
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
      //定时器id
      timerID: null,
      //系统当前时间
      systemDateTime: null,
    };
  },
  created() {
    this.$socket.registerCallBack("fullScreen", this.recvData);
    this.$socket.registerCallBack("themeChange", this.recvThemeChange);
    this.currentTime();
  },
  computed: {
    ...mapState(["theme"]),
    logoSrc() {
      return "/static/img/" + getThemeValue(this.theme).logoSrc;
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      };
    },
    themeSrc() {
      return "/static/img/" + getThemeValue(this.theme).themeSrc;
    },
  },

  destroyed() {
    // 组件销毁时，销毁事件
    this.$socket.unRegisterCallBack("fullScreen");
    this.$socket.unRegisterCallBack("themeChange");
    clearInterval(this.timerID);
  },
  methods: {
    changeSize(chartName) {
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      //手动调用每个图表中的screenAdapter触发响应式
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapter();
      // });
      //一端操作多端同步效果
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      // const targetValue = !this.fullScreenStatus.chartName;
      this.$socket.send({
        action: "fullScreen",
        socketType: "fullScreen",
        chartName: chartName,
        value: this.fullScreenStatus[chartName],
      });
    },
    //服务器广播全屏事件的客户端响应
    recvData(data) {
      //取出是哪一个图表进行切换
      const chartName = data.chartName;
      //判断切换成什么类型
      const targetValue = data.value;
      this.fullScreenStatus[chartName] = targetValue;
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      });
    },
    //切换主题
    handleChangeTheme() {
      // this.$store.commit("changeTheme");
      // console.log(this.theme);
      this.$socket.send({
        action: "themeChange",
        socketType: "themeChange",
        chartName: "",
        value: "",
      });
    },
    // 接收到服务器切换主题事件
    recvThemeChange() {
      this.$store.commit("changeTheme");
    },
    //计算当前时间
    currentTime() {
      this.systemDateTime = new Date().toLocaleString();
      this.timerID && clearInterval(this.timerID);
      this.timerID = setInterval(() => {
        this.systemDateTime = new Date().toLocaleString();
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
@header-height: 64px;
//全屏样式
.fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  z-index: 9999;
}
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;

  .screen-header {
    position: relative;
    width: 100%;
    height: @header-height;
    padding-top: 20px;
    // 主题背景图片
    .theme-img img {
      width: 100%;
    }
    //logo
    .logo {
      position: absolute;
      top: 0;
      left: 1%;
      height: 30px;
      color: #fff;
    }
    // 标题
    .title {
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
    }
    //主题皮肤和时间
    .title-right {
      display: flex;
      position: absolute;
      top: 30%;
      right: 1%;
      img {
        margin-right: 10px;
        width: 30px;
      }
    }
  }

  .screen-body {
    display: flex;
    width: 100%;
    height: 96%;
    margin-top: 10px;
    .screen-left {
      width: 27.6%;
      margin: 0 25px;
      #left-top {
        height: 48%;
        position: relative;
      }
      #left-bottom {
        height: 36%;
        margin-top: 25px;
        position: relative;
      }
    }
    .screen-center {
      width: 41.5%;
      #center-top {
        height: 53%;
        position: relative;
      }
      #center-bottom {
        height: 31%;
        margin-top: 25px;
        position: relative;
      }
    }
    .screen-right {
      width: 27.6%;
      margin: 0 25px;
      #right-top {
        height: 46%;
        position: relative;
      }
      #right-bottom {
        height: 38%;
        margin-top: 25px;
        position: relative;
      }
    }
  }
}
.resize {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
</style>